﻿
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>LayIM客服模式 webim在线演示 - Layui</title>
    <link rel="stylesheet" href="//res.layui.com/layui/build/css/layui.css" media="all">
    <link rel="stylesheet" href="//res.layui.com/css/global.css" media="all">
    <link rel="stylesheet" href="style.css?t=20160620" media="all">
</head>
<body>
<div class="header site-layim-header">
    <div class="layui-main">
        <a class="logo" href="http://www.layui.com">
            <img src="//res.layui.com/images/layui/logo-1.png" alt="layui">
        </a>
        <ul class="layui-nav">
            <li class="layui-nav-item">
                <a href="/">LayIM首页</a>
            </li>
            <li class="layui-nav-item">
                <a href="http://fly.layui.com">社区</a>
            </li>
        </ul>
    </div>
</div>
<div class="layui-main">
    <div class="demo-footer" style="margin-top: 30px; line-height: 30px;">
        <blockquote class="layui-elem-quote">你现在阅览的是：LayIM客服模式，即屏蔽了主面板，你可以按照场景选择性配置。</blockquote>
        <p>
            <a href="http://www.layui.com/demo/layim.html" class="layui-btn" style="display: inline-block; padding: 0 15px; line-height: 42px;">
                你也可以去看看LayIM社交模式
            </a>
        </p>
        <p class="demo-content">
            <a href="http://fly.layui.com/jie/3244.html">案例/教程</a>
            <a href="http://www.layui.com/doc/layim.html">文档</a>
            <a href="http://www.layui.com/doc/layim.html#copyright">关于版权须知</a></p>
        <p>我们更希望您能捐赠获得LayIM的授权，<em style="color: #000;">君子不用防，抠码防不住</em></p>
        <pre class="layui-code" lay-skin="notepad" style="text-align: left;">
//演示代码

layui.use('layim', function(layim){

  var layim = layui.layim;

  layim.config({
    init: {
      //配置客户信息
      mine: {
        "username": "访客" //我的昵称
        ,"id": "100000123" //我的ID
        ,"status": "online" //在线状态 online：在线、hide：隐身
        ,"remark": "在深邃的编码世界，做一枚轻盈的纸飞机" //我的签名
        ,"avatar": "//res.layui.com/images/fly/avatar/00.jpg" //我的头像
      }
    }
    //开启客服模式
    ,brief: true
  });

  //打开一个客服面板
  layim.chat({
    name: '在线客服一' //名称
    ,type: 'kefu' //聊天类型
    ,avatar: '//tp1.sinaimg.cn/5619439268/180/40030060651/1' //头像
    ,id: 1111111 //定义唯一的id方便你处理信息
  }).chat({
    name: '在线客服二' //名称
    ,type: 'kefu' //聊天类型
    ,avatar: '//tp1.sinaimg.cn/5619439268/180/40030060651/1' //头像
    ,id: 2222222 //定义唯一的id方便你处理信息
  });
  layim.setChatMin(); //收缩聊天面板

});
    </pre>
    </div>
</div>
<script src="//res.layui.com/layui/dist/layui.js"></script>
<script>layui.use('layim',function(layim){var layim =layui.layim;layim.config({init:{mine:{"username":"访客"
    ,"id":"100000123"
    ,"status":"online"
    ,"remark":"在深邃的编码世界，做一枚轻盈的纸飞机"
    ,"avatar":"//res.layui.com/images/fly/avatar/00.jpg"
}
}
    ,brief:true
});layim.chat({name:'在线客服一'
    ,type:'kefu'
    ,avatar:'//tp1.sinaimg.cn/5619439268/180/40030060651/1'
    ,id:1111111
}).chat({name:'在线客服二'
    ,type:'kefu'
    ,avatar:'//tp1.sinaimg.cn/5619439268/180/40030060651/1'
    ,id:2222222
});layim.setChatMin();});layui.use(['code'],function(){layui.code({elem:'pre'
})
});</script>
<script type="text/javascript">var cnzz_protocol =(("https:" ==document.location.protocol) ?" https://" :" http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_30088308'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "w.cnzz.com/c.php%3Fid%3D30088308' type='text/javascript'%3E%3C/script%3E"));</script>
</body>
</html>
